<template>
  <div>
    <el-descriptions :column="5" border v-if="order">
      <el-descriptions-item label="工单日期：">
        {{ order.BillDate }}
      </el-descriptions-item>
      <el-descriptions-item label="工单单号：">
        {{ order.BillNO }}
      </el-descriptions-item>
      <el-descriptions-item label="来源单号：">
        {{ order.FromNO }}
      </el-descriptions-item>
      <el-descriptions-item label="客户编号：">
        {{ order.CustomerID }}
      </el-descriptions-item>

      <el-descriptions-item label="完工状态：">
        {{ order.CompleteStatus }}
      </el-descriptions-item>
      <el-descriptions-item label="产品编号：">
        {{ order.ProdID }}
      </el-descriptions-item>
      <el-descriptions-item label="产品名称：">
        {{ order.ProdName }}
      </el-descriptions-item>
      <el-descriptions-item label="规格型号：">
        {{ order.ProdSize }}
      </el-descriptions-item>
      <el-descriptions-item label="生产车间：">
        {{ order.LineName }}
      </el-descriptions-item>
      <el-descriptions-item label="负责人员：">
        {{ order.PersonName }}
      </el-descriptions-item>
      <el-descriptions-item label="预开工日：">
        {{ order.EstTakeMatDate }}
      </el-descriptions-item>
      <el-descriptions-item label="预完工日：">
        {{ order.EstWareInDate }}
      </el-descriptions-item>
      <el-descriptions-item label="工单数量：">
        {{ order.Quantity }}
      </el-descriptions-item>
      <!-- <el-descriptions-item label="入库数量：">
        {{ order.rksl }}
      </el-descriptions-item> -->
      <el-descriptions-item label="良品入库数量：">
        {{ order.lp }}
      </el-descriptions-item>
      <el-descriptions-item label="不良入库数量：">
        {{ order.blp }}
      </el-descriptions-item>
      <el-descriptions-item label="单位：">
        {{ order.Unit }}
      </el-descriptions-item>
      <el-descriptions-item label="领料数量：">
        {{ lingLiaoData.llsl }}
      </el-descriptions-item>

      <el-descriptions-item label="未领数量：">
        {{ lingLiaoData.wlsl }}
      </el-descriptions-item>

      <el-descriptions-item label="工单状态：">
        {{ order.BillStatus }}
      </el-descriptions-item>
      <el-descriptions-item label="是否审核：">
        {{ order.HasCheck }}
      </el-descriptions-item>

      <el-descriptions-item label="领料进度：" :span="5">
        <el-progress
          :stroke-width="16"
          striped
          :striped-flow="parseInt((lingLiaoData.llsl / order.Quantity) * 100) < 100"
          :percentage="parseInt((lingLiaoData.llsl / order.Quantity) * 100)"
          v-if="!isNaN(parseInt((lingLiaoData.llsl / order.Quantity) * 100))"
          :duration="10"
          color="#67c23a"
        />
      </el-descriptions-item>

      <el-descriptions-item label="生产进度：" :span="5">
        <el-progress
          :stroke-width="16"
          striped
          :striped-flow="parseInt((order.rksl / order.Quantity) * 100) < 100"
          :percentage="parseInt((order.rksl / order.Quantity) * 100)"
          v-if="!isNaN(parseInt((order.rksl / order.Quantity) * 100))"
          :duration="10"
        />
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup>
import { watchEffect, ref } from 'vue'
import { getOrderDetail, getOrderLingliaoDetail } from '@/api/decision/production.js'

const order = ref({})
const lingLiaoData = ref({})

const prop = defineProps({
  BillNO: String
})

const info = () => {
  getOrderDetail({ BillNO: prop.BillNO }).then(({ data }) => {
    order.value = data[0]
  })

  getOrderLingliaoDetail({ BillNO: prop.BillNO }).then(({ data }) => {
    lingLiaoData.value = data[0]
  })
}

watchEffect(() => {
  info()
})
</script>

<style scoped lang="scss"></style>
